<template>
  <div>
    <h2>动态组件</h2>
    <button @click="comName = 'myLeft'">展示Left</button>
    <button @click="comName = 'myRight'">展示Right</button>
  <!-- 给动态组件套一层 keep-alive,可以保持组件不被销毁，从而可以保持组件的状态 -->
  <!-- include="MyLeft,MyRight” 表示指定哪些组件需要保持状态; 不指定的就不会被缓存了 -->
  <!-- exclude="MyLeft,MyRight” 表示指定哪些组件不需要保持状态: 不指定的就会被缓存 -->
  <keep-alive include="myRight,myLeft">
    <!-- 动态组件，使用 component 标签，关键是 :is 属性，属性值是组件名 -->
  <component :is="comName"></component>
  </keep-alive>
  </div>
</template>

<script>
import myLeft from '@/components/myLeft.vue'
import myRight from '@/components/myRight.vue'
export default {
  data(){
    return{
      comName:myLeft
    }
  },
components: {
  myLeft,
  myRight
}
}
</script>

<style>

</style>